<template>
  <div class="order" ref="order">
    <van-nav-bar
      :title="activeName + '订单'"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/My')"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeName" animated @change="$refs.order.scrollTop = 0">
      <van-tab title="全部" name="商品">
        <div class="container">
          <ul>
            <li v-for="(item, index) of orderLists" :key="index">
              <div class="item">
                <div class="item_top">
                  <div class="top_left">
                    <p class="order_data">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
                      /><strong>小米商城</strong>
                    </p>
                  </div>
                  <div class="top_right" v-if="item.type !== '退修换'">
                    等{{ item.type }}
                  </div>
                </div>
                <div
                  class="item_center"
                  v-for="(value, index) of item.orderList"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'orderDetails',
                      params: {
                        item,
                      },
                    })
                  "
                >
                  <img :src="value.image_url" />
                  <div class="pro_info">
                    <p class="pro_name">{{ value.image_name }}</p>
                  </div>
                  <div class="pro_right">
                    <p class="pro_price">
                      <span class="rmb">￥</span>{{ value.market_price }}
                    </p>
                    <p class="pro_num">x{{ value.num }}</p>
                  </div>
                </div>
                <div class="time">
                  <span class="time_add">{{ item.time }}</span
                  ><span>共{{ item.num }}件商品</span><span>应付款：</span
                  ><strong>{{ item.total }}元</strong>
                </div>
              </div>
              <div class="box_btn">
                <div
                  class="btn btn_bordered btn_gray"
                  v-if="item.type !== '退修换'"
                  @click="cancel(item.num, item.time, item.total, '')"
                >
                  取消订单
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待付款'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即付款
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待发货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即发货
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待收货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  确认收货
                </div>
              </div>
            </li>
          </ul>
          <div class="empty" v-show="!orderLists.length">
            您还没有 {{ activeName }}订单
          </div>
          <div>
            <div
              style="
                margin-top: 20px;
                border-bottom: 0.2rem solid rgb(245, 245, 245);
              "
            ></div>
            <div class="head_mark">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
                alt=""
              />
            </div>
            <div class="recommend_lists">
              <div
                class="recommend_list"
                v-for="(item, index) of recommend"
                :key="index"
                @click="$router.push('/details')"
              >
                <div class="list_img">
                  <img :src="'https:' + item.image_url" />
                </div>
                <div class="list_info">
                  <div class="list_name">{{ item.name }}</div>
                  <div class="list_price price">
                    ￥{{ item.price
                    }}<del class="price" v-if="item.market_price !== item.price"
                      >￥{{ item.market_price }}</del
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待付款" name="待付款">
        <div class="container">
          <ul>
            <li v-for="(item, index) of orderList" :key="index">
              <div class="item">
                <div class="item_top">
                  <div class="top_left">
                    <p class="order_data">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
                      /><strong>小米商城</strong>
                    </p>
                  </div>
                  <div class="top_right">等{{ item.type }}</div>
                </div>
                <div
                  class="item_center"
                  v-for="(value, index) of item.orderList"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'orderDetails',
                      params: {
                        item,
                      },
                    })
                  "
                >
                  <img :src="value.image_url" />
                  <div class="pro_info">
                    <p class="pro_name">{{ value.image_name }}</p>
                  </div>
                  <div class="pro_right">
                    <p class="pro_price">
                      <span class="rmb">￥</span>{{ value.market_price }}
                    </p>
                    <p class="pro_num">x{{ value.num }}</p>
                  </div>
                </div>
                <div class="time">
                  <span class="time_add">{{ item.time }}</span
                  ><span>共{{ item.num }}件商品</span><span>应付款：</span
                  ><strong>{{ item.total }}元</strong>
                </div>
              </div>
              <div class="box_btn">
                <div
                  class="btn btn_bordered btn_gray"
                  @click="cancel(item.num, item.time, item.total, '')"
                >
                  取消订单
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待付款'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即付款
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待发货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即发货
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待收货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  确认收货
                </div>
              </div>
            </li>
          </ul>
          <div class="empty" v-show="!orderList.length">
            您还没有 {{ activeName }}订单
          </div>
          <div>
            <div
              style="
                margin-top: 20px;
                border-bottom: 0.2rem solid rgb(245, 245, 245);
              "
            ></div>
            <div class="head_mark">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
                alt=""
              />
            </div>
            <div class="recommend_lists">
              <div
                class="recommend_list"
                v-for="(item, index) of recommend"
                :key="index"
                @click="$router.push('/details')"
              >
                <div class="list_img">
                  <img :src="'https:' + item.image_url" />
                </div>
                <div class="list_info">
                  <div class="list_name">{{ item.name }}</div>
                  <div class="list_price price">
                    ￥{{ item.price
                    }}<del class="price" v-if="item.market_price !== item.price"
                      >￥{{ item.market_price }}</del
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待发货" name="待发货">
        <div class="container">
          <ul>
            <li v-for="(item, index) of orderList" :key="index">
              <div class="item">
                <div class="item_top">
                  <div class="top_left">
                    <p class="order_data">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
                      /><strong>小米商城</strong>
                    </p>
                  </div>
                  <div class="top_right">等{{ item.type }}</div>
                </div>
                <div
                  class="item_center"
                  v-for="(value, index) of item.orderList"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'orderDetails',
                      params: {
                        item,
                      },
                    })
                  "
                >
                  <img :src="value.image_url" />
                  <div class="pro_info">
                    <p class="pro_name">{{ value.image_name }}</p>
                  </div>
                  <div class="pro_right">
                    <p class="pro_price">
                      <span class="rmb">￥</span>{{ value.market_price }}
                    </p>
                    <p class="pro_num">x{{ value.num }}</p>
                  </div>
                </div>
                <div class="time">
                  <span class="time_add">{{ item.time }}</span
                  ><span>共{{ item.num }}件商品</span><span>已付款：</span
                  ><strong>{{ item.total }}元</strong>
                </div>
              </div>
              <div class="box_btn">
                <div
                  class="btn btn_bordered btn_gray"
                  @click="cancel(item.num, item.time, item.total, '')"
                >
                  取消订单
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待付款'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即付款
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待发货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即发货
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待收货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  确认收货
                </div>
              </div>
            </li>
          </ul>
          <div class="empty" v-show="!orderList.length">
            您还没有 {{ activeName }}订单
          </div>
          <div>
            <div
              style="
                margin-top: 20px;
                border-bottom: 0.2rem solid rgb(245, 245, 245);
              "
            ></div>
            <div class="head_mark">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
                alt=""
              />
            </div>
            <div class="recommend_lists">
              <div
                class="recommend_list"
                v-for="(item, index) of recommend"
                :key="index"
                @click="$router.push('/details')"
              >
                <div class="list_img">
                  <img :src="'https:' + item.image_url" />
                </div>
                <div class="list_info">
                  <div class="list_name">{{ item.name }}</div>
                  <div class="list_price price">
                    ￥{{ item.price
                    }}<del class="price" v-if="item.market_price !== item.price"
                      >￥{{ item.market_price }}</del
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待收货" name="待收货">
        <div class="container">
          <ul>
            <li v-for="(item, index) of orderList" :key="index">
              <div class="item">
                <div class="item_top">
                  <div class="top_left">
                    <p class="order_data">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
                      /><strong>小米商城</strong>
                    </p>
                  </div>
                  <div class="top_right">等{{ item.type }}</div>
                </div>
                <div
                  class="item_center"
                  v-for="(value, index) of item.orderList"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'orderDetails',
                      params: {
                        item,
                      },
                    })
                  "
                >
                  <img :src="value.image_url" />
                  <div class="pro_info">
                    <p class="pro_name">{{ value.image_name }}</p>
                  </div>
                  <div class="pro_right">
                    <p class="pro_price">
                      <span class="rmb">￥</span>{{ value.market_price }}
                    </p>
                    <p class="pro_num">x{{ value.num }}</p>
                  </div>
                </div>
                <div class="time">
                  <span class="time_add">{{ item.time }}</span
                  ><span>共{{ item.num }}件商品</span><span>已付款：</span
                  ><strong>{{ item.total }}元</strong>
                </div>
              </div>
              <div class="box_btn">
                <div
                  class="btn btn_bordered btn_gray"
                  @click="cancel(item.num, item.time, item.total, '')"
                >
                  取消订单
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待付款'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即付款
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待发货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  立即发货
                </div>
                <div
                  class="btn btn_bordered"
                  v-if="item.type == '待收货'"
                  @click="cancel(item.num, item.time, item.total, item.type)"
                >
                  确认收货
                </div>
              </div>
            </li>
          </ul>
          <div class="empty" v-show="!orderList.length">
            您还没有 {{ activeName }}订单
          </div>
          <div>
            <div
              style="
                margin-top: 20px;
                border-bottom: 0.2rem solid rgb(245, 245, 245);
              "
            ></div>
            <div class="head_mark">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
                alt=""
              />
            </div>
            <div class="recommend_lists">
              <div
                class="recommend_list"
                v-for="(item, index) of recommend"
                :key="index"
                @click="$router.push('/details')"
              >
                <div class="list_img">
                  <img :src="'https:' + item.image_url" />
                </div>
                <div class="list_info">
                  <div class="list_name">{{ item.name }}</div>
                  <div class="list_price price">
                    ￥{{ item.price
                    }}<del class="price" v-if="item.market_price !== item.price"
                      >￥{{ item.market_price }}</del
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="退修换" name="退修换">
        <div class="container">
          <ul>
            <li v-for="(item, index) of orderList" :key="index">
              <div class="item">
                <div class="item_top">
                  <div class="top_left">
                    <p class="order_data">
                      <img
                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
                      /><strong>小米商城</strong>
                    </p>
                  </div>
                </div>
                <div
                  class="item_center"
                  v-for="(value, index) of item.orderList"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'orderDetails',
                      params: {
                        item,
                      },
                    })
                  "
                >
                  <img :src="value.image_url" />
                  <div class="pro_info">
                    <p class="pro_name">{{ value.image_name }}</p>
                  </div>
                  <div class="pro_right">
                    <p class="pro_price">
                      <span class="rmb">￥</span>{{ value.market_price }}
                    </p>
                    <p class="pro_num">x{{ value.num }}</p>
                  </div>
                </div>
                <div class="time">
                  <span class="time_add">{{ item.time }}</span
                  ><span>共{{ item.num }}件商品</span><span>已付款：</span
                  ><strong>{{ item.total }}元</strong>
                </div>
              </div>
            </li>
          </ul>
          <div class="empty" v-show="!orderList.length">
            您还没有 {{ activeName }}订单
          </div>
          <div>
            <div
              style="
                margin-top: 20px;
                border-bottom: 0.2rem solid rgb(245, 245, 245);
              "
            ></div>
            <div class="head_mark">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
                alt=""
              />
            </div>
            <div class="recommend_lists">
              <div
                class="recommend_list"
                v-for="(item, index) of recommend"
                :key="index"
                @click="$router.push('/details')"
              >
                <div class="list_img">
                  <img :src="'https:' + item.image_url" />
                </div>
                <div class="list_info">
                  <div class="list_name">{{ item.name }}</div>
                  <div class="list_price price">
                    ￥{{ item.price
                    }}<del class="price" v-if="item.market_price !== item.price"
                      >￥{{ item.market_price }}</del
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { recommend } from "../assets/js/shuju.js";
import { NavBar, Tab, Tabs, Dialog } from "vant";
import { mapMutations, mapState } from "vuex";
Vue.use(NavBar);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "Order",
  data() {
    return {
      activeName: "商品",
      recommend: null, //内容
    };
  },
  created() {
    //获取数据
    this.recommend = recommend;
    if (this.$route.params.name) {
      this.activeName = this.$route.params.name;
    }
  },
  computed: {
    ...mapState({ orderLists: "orderLists" }),
    //过滤列表
    orderList() {
      return this.orderLists.filter((ele) => ele.type == this.activeName);
    },
  },
  methods: {
    ...mapMutations({ delOrder: "delOrder", modifyOrder: "modifyOrder" }),
    //订单操作
    cancel(num, time, total, type) {
      let index = this.orderLists.findIndex(
        (ele) => ele.num == num && ele.time == time && ele.total == total
      );
      let title =
        type === ""
          ? "确认取消订单"
          : type === "待付款"
          ? "确认支付"
          : type === "待发货"
          ? "确认发货"
          : type === "待收货"
          ? "确认收货"
          : "";
      let modifyType =
        type === "待付款"
          ? "待发货"
          : type === "待发货"
          ? "待收货"
          : type === "待收货"
          ? "退修换"
          : "";
      Dialog.confirm({
        title,
      })
        .then(() => {
          if (type == "") {
            this.delOrder(index);
          } else {
            this.modifyOrder({ index, type: modifyType });
          }
        })
        .catch(() => {});
    },
  },
  beforeRouteEnter(to, from, next) {
    !window.sessionStorage.getItem("token") ? next("/login") : next();
  },
};
</script>
<style lang="less" >
.order {
  .container {
    margin-right: auto;
    margin-left: auto;
    flex-basis: 100%;
    .recommend_lists {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .recommend_list {
        flex: 0 0 49.5%;
        width: 49.5%;
        .list_img {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .list_info {
          padding: 0.18rem 0.26rem 0.22rem;
          .list_name {
            font-size: 0.28rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .list_price {
            font-size: 0.32rem;
            color: #ff6700;
            margin-top: 0.1rem;
            del {
              font-size: 0.22rem;
              margin-left: 0.1rem;
              color: rgba(0, 0, 0, 0.54);
              text-decoration: line-through;
            }
          }
          .price {
            position: relative;
            padding-left: 0.5em;

            line-height: 1em;
          }
        }
      }
    }
    .head_mark {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .empty {
      font-size: 0.3rem;
      text-align: center;
      background: url(https://s1.mi.com/m/images/m/empty.png) 50% 0 no-repeat;
      background-size: 2rem 2rem;
      padding-top: 2.5rem;
      color: #999;
      margin: 0.8rem 1rem 0;
    }
    ul {
      li {
        font-size: 0.24rem;
        border-top: 0.2rem solid RGBA(245, 245, 245, 1);
        .item {
          .item_top {
            border-bottom: 1px solid #ececec;
            padding: 0.17rem 0.28rem;
            display: flex;
            justify-content: space-between;
            .top_left {
              text-align: left;
              .order_data {
                font-size: 0.28rem;
                color: #000;
                display: flex;
                align-items: center;
                img {
                  width: 0.4rem;
                  height: 0.4rem;
                  margin-right: 0.08rem;
                  strong {
                    font-weight: 400;
                  }
                }
              }
            }
            .top_right {
              color: #ff5722;
              font-size: 0.26rem;
              position: relative;
              top: 0.07rem;
            }
          }
          .item_center {
            padding: 0.2rem 0.28rem;
            text-align: left;
            align-items: center;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ececec;
            &:last-child {
              border: none;
            }
            img {
              width: 1.16rem;
              height: 1.16rem;
              margin-right: 0.24rem;
              display: block;
            }
            .pro_info {
              .pro_name {
                font-size: 0.28rem;
                color: #000;
                overflow: hidden;
              }
            }
            .pro_right {
              text-align: right;
              color: rgba(0, 0, 0, 0.5);
              .pro_price {
                font-size: 0.28rem;
                .rmb {
                  font-size: 0.2rem;
                  position: relative;
                }
              }
            }
          }
          .time {
            padding: 0.2rem 0.28rem;
            text-align: right;
            border-top: 1px solid #ececec;
            font-size: 0.24rem;
            span {
              margin-left: 0.2rem;
            }
            .time_add {
              float: left;
              font-size: 0.19rem;
              color: #919191;
              margin-top: 0.06rem;
              margin-left: 0.2rem;
            }
            strong {
              font-size: 0.3rem;
              display: inline-block;
              color: rgba(0, 0, 0, 0.5);
              font-weight: 400;
            }
          }
          p {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.8em;
          }
        }
        .box_btn {
          padding: 0.15rem 0.28rem 0.2rem;
          overflow: hidden;
          text-align: right;
          .btn {
            display: inline-block;
            width: 1rem;
            height: auto;
            font-size: 0.22rem;
            padding: 0.14rem 0.2rem;
            border-radius: 0.04rem;
            margin-left: 0.2rem;
            line-height: normal;
            &.btn_gray {
              color: #999;
              border: 1px solid #999;
            }
          }
          .btn_bordered {
            color: #ff6700;
            background: transparent;
            border: 1px solid #ff6700;
          }
        }
      }
    }
  }
  .van-nav-bar {
    background-color: rgb(242, 242, 242);
    position: sticky;
    top: 0;
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 16px;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .van-tabs--line {
    .van-tabs__wrap {
      position: sticky;
      top: 46px;
      z-index: 80;
    }
  }
}
</style>